<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-22 17:55:41
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-14 14:13:39
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\taskDrawer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="taskDrawer">
    <el-drawer
      title="提示"
      :visible.sync="visible"
      direction="rtl"
      custom-class="taskModelCustomClass"
      :before-close="close"
    >
      <div slot="title" class="taskModelTitle">
        <el-button
          type="primary"
          v-if="!isFile"
          @click="handleFinishTask(propsObj.taskDetailData.id)"
          :loading="finishLoading"
          :disabled="propsObj.taskDetailData.status !== '0'"
          >完成任务（{{
            getStatus(propsObj.taskDetailData.status)
          }}）</el-button
        >
      </div>
      <div class="fixedBox">
        <div class="fixedMain" ref="fixedMain">
          <div class="taskModelMain">
            <div class="reviewTaksFinish" v-if="propsObj.checkData">
              <div>
                <span class="avater" v-if="!propsObj.checkData.avatar">{{
                  propsObj.checkData.name[0]
                }}</span>
                <img
                  :src="propsObj.taskDetailData.avatar"
                  alt=""
                  v-else
                  class="avaterImg"
                />
                <span style="margin-left: 5px; font-size: 13px">{{
                  propsObj.checkData.name
                }}</span>
                <span style="margin-left: 8px; font-size: 13px"
                  >提交了完成审批，请审批！</span
                >
              </div>
              <div>
                <el-button
                  type="success"
                  size="mini"
                  @click="handleReviewOperate('1')"
                  >通过</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleReviewOperate('2')"
                  >驳回</el-button
                >
              </div>
            </div>
            <div class="createUser">
              <div class="code">
                <span style="margin-right: 3px">编号</span
                >{{ propsObj.taskDetailData.code }}
              </div>
              <div class="createUserName">
                <span>创建人</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="propsObj.taskDetailData.createByName"
                  placement="top"
                >
                  <span
                    class="avater"
                    v-if="!propsObj.taskDetailData.createByAvatar"
                    >{{ propsObj.taskDetailData.createByName[0] }}</span
                  >
                  <img
                    :src="propsObj.taskDetailData.createByAvatar"
                    alt=""
                    v-else
                  />
                </el-tooltip>
              </div>
            </div>
            <div class="projectTask" v-if="propsObj.taskDetailData.projectTile">
              <el-tag>所属项目</el-tag>
              <span style="margin: 0 5px; color: #1890ff">></span>
              <el-tag>{{ propsObj.taskDetailData.projectTile }}</el-tag>
            </div>
            <div class="title_task">
              <p>{{ propsObj.taskDetailData.title }}</p>
              <p>
                {{
                  propsObj.taskDetailData.taskType === "2"
                    ? "日程"
                    : propsObj.taskDetailData.type === "1"
                    ? "标准任务"
                    : "流程任务"
                }}
              </p>
            </div>
            <div class="taskHead iconMainFlex">
              <el-tooltip
                class="item"
                effect="dark"
                content="负责人"
                placement="top"
              >
                <i
                  class="el-icon-user"
                  style="margin-right: 10px; font-size: 20px"
                ></i>
              </el-tooltip>
              <span class="hasTaskHead">
                <img
                  :src="propsObj.taskDetailData.headUserAvatar"
                  alt=""
                  v-if="propsObj.taskDetailData.headUserAvatar"
                />
                <span v-else class="avatar">{{
                  propsObj.taskDetailData.headUserName[0]
                }}</span>
                <span style="margin-left: 5px">{{
                  `${propsObj.taskDetailData.headUserName}(${propsObj.taskDetailData.headUserDept})`
                }}</span>
              </span>
            </div>
            <div class="time">
              <span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="时间"
                  placement="top"
                >
                  <i
                    class="el-icon-date"
                    style="margin-right: 10px; font-size: 20px"
                  ></i>
                </el-tooltip>
                <span style="padding-left: 8px; color: #666; font-size: 13px">{{
                  `${propsObj.taskDetailData.startTime} - ${propsObj.taskDetailData.endTime}`
                }}</span>
              </span>
              <span style="padding-left: 8px; color: #666; font-size: 13px">{{
                getLoopType(propsObj.taskDetailData.loopType)
              }}</span>
            </div>
            <div
              class="taskDesc iconMainFlex"
              style="align-items: flex-start"
              v-if="propsObj.taskDetailData.description"
            >
              <el-tooltip
                class="item"
                effect="dark"
                content="任务描述"
                placement="top"
              >
                <i
                  class="el-icon-tickets"
                  style="margin-right: 10px; font-size: 20px"
                ></i>
              </el-tooltip>
              <div
                class="taskDescBorder"
                v-html="propsObj.taskDetailData.description"
              ></div>
            </div>
            <div class="priority iconMainFlex" v-if="propsObj.taskDetailData.projectListName">
              <i
                class="el-icon-s-order"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span  style="font-size: 13px; color: #666">项目清单</span>
              <span  style="font-size: 13px; color: #333;margin-left:12px">{{propsObj.taskDetailData.projectListName}}</span>
            </div>
            <div class="priority iconMainFlex">
              <i
                class="el-icon-place"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span style="font-size: 13px; color: #666">优先级</span>
              <div>
                <el-button
                  :type="currentPriority(propsObj.taskDetailData.priority)"
                  plain
                  size="mini"
                  style="margin-left: 12px; width: 90px"
                >
                  {{
                    propsObj.taskDetailData.priority
                      ? propsObj.taskDetailData.priority === "1"
                        ? "普通"
                        : propsObj.taskDetailData.priority === "2"
                        ? "紧急"
                        : "非常紧急"
                      : ""
                  }}
                </el-button>
              </div>
            </div>
            <div class="planWorking iconMainFlex">
              <i
                class="el-icon-date"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span style="font-size: 13px; color: #666">计划工时</span>
              <div style="margin-left: 12px; color: #888; font-size: 14px">
                {{
                  handleEndTimeChange(
                    propsObj.taskDetailData.startTime,
                    propsObj.taskDetailData.endTime
                  )
                }}&nbsp;天
              </div>
            </div>
            <div
              class="label iconMainFlex"
              v-if="
                propsObj.taskDetailData.tags &&
                propsObj.taskDetailData.tags.length
              "
            >
              <i
                class="el-icon-price-tag"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span style="font-size: 13px; color: #666">标签</span>
              <div
                style="
                  display: flex;
                  flex-wrap: wrap;
                  max-width: 85%;
                  align-items: center;
                "
              >
                <el-tag
                  type="info"
                  v-for="item in propsObj.taskDetailData.tags"
                  :key="item.id"
                  :style="{
                    marginLeft: '10px',
                    color: '#fff',
                    background: item.color,
                    border: 'none',
                    height: '26px',
                  }"
                >
                  {{ item.tag }}
                </el-tag>
              </div>
            </div>
            <div
              class="participants iconMainFlex"
              v-if="
                propsObj.taskDetailData.participateInUsers &&
                propsObj.taskDetailData.participateInUsers.length
              "
            >
              <i
                class="el-icon-s-custom"
                style="
                  margin-right: 10px;
                  font-size: 20px;
                  color: #606266;
                  margin-top: 5px;
                "
              ></i>
              <span style="font-size: 13px; color: #666; margin-top: 5px"
                >参与人</span
              >
              <div style="display: flex; flex-wrap: wrap; max-width: 85%">
                <el-tag
                  type="warning"
                  v-for="item in propsObj.taskDetailData.participateInUsers"
                  :key="item.id"
                  style="margin-left: 10px; margin-bottom: 8px"
                >
                  {{ item.name }}
                </el-tag>
              </div>
            </div>
            <div
              class="finishReview iconMainFlex"
              v-if="
                propsObj.taskDetailData.auditUsers &&
                propsObj.taskDetailData.auditUsers.length
              "
            >
              <i
                class="el-icon-user"
                style="
                  margin-right: 10px;
                  font-size: 20px;
                  color: #606266;
                  margin-top: 5px;
                "
              ></i>
              <span style="font-size: 13px; color: #666; margin-top: 5px"
                >完成审批</span
              >
              <div style="display: flex; flex-wrap: wrap; max-width: 85%">
                <el-tag
                  type="success"
                  v-for="item in propsObj.taskDetailData.auditUsers"
                  :key="item.id"
                  style="margin-left: 10px; margin-bottom: 8px"
                >
                  {{ item.name }}
                </el-tag>
                <el-button
                  plain
                  type="primary"
                  size="mini"
                  style="margin-left: 12px; width: 90px; height: 28px"
                  v-if="
                    propsObj.taskDetailData.auditUsers.length > 1 &&
                    propsObj.taskDetailData.auditUserType
                  "
                >
                  {{
                    propsObj.taskDetailData.auditUserType
                      ? propsObj.taskDetailData.auditUserType === "1"
                        ? "依次审批"
                        : propsObj.taskDetailData.auditUserType === "2"
                        ? "或签"
                        : "会签"
                      : ""
                  }}
                </el-button>
              </div>
            </div>
            <div
              class="finishReview iconMainFlex"
              v-if="
                propsObj.taskDetailData.copyOfUsers &&
                propsObj.taskDetailData.copyOfUsers.length
              "
            >
              <i
                class="el-icon-user-solid"
                style="
                  margin-right: 10px;
                  font-size: 20px;
                  color: #606266;
                  margin-top: 5px;
                "
              ></i>
              <span style="font-size: 13px; color: #666; margin-top: 5px"
                >抄送人</span
              >
              <div style="display: flex; flex-wrap: wrap; max-width: 85%">
                <el-tag
                  v-for="item in propsObj.taskDetailData.copyOfUsers"
                  :key="item.id"
                  style="margin-left: 10px; margin-bottom: 8px"
                >
                  {{ item.name }}
                </el-tag>
              </div>
            </div>
            <div
              style="margin-bottom: 12px"
              v-if="propsObj.taskDetailData.checkOptions"
            >
              <i
                class="el-icon-finished"
                style="
                  margin-right: 10px;
                  font-size: 20px;
                  color: #606266;
                  margin-top: 5px;
                "
              ></i>
              <span style="font-size: 13px; color: #666; margin-top: 5px"
                >检查项</span
              >
              <div style="margin-top: 12px">
                <div
                  v-for="(
                    item, index
                  ) in propsObj.taskDetailData.checkOptions.split(',')"
                  :key="item"
                  style="
                    margin-left: 10px;
                    margin-bottom: 8px;
                    font-size: 14px;
                    color: #666;
                    padding-left: 20px;
                  "
                >
                  <span>{{ index + 1 }}、</span>{{ item }}
                </div>
              </div>
            </div>
            <div
              style="margin-bottom: 12px"
              v-if="
                propsObj.taskDetailData.childTasks &&
                propsObj.taskDetailData.childTasks.length
              "
            >
              <i
                class="el-icon-guide"
                style="
                  margin-right: 10px;
                  font-size: 20px;
                  color: #606266;
                  margin-top: 5px;
                "
              ></i>
              <span style="font-size: 13px; color: #666; margin-top: 5px"
                >子任务</span
              >
              <div
                style="margin-top: 12px"
                v-if="propsObj.taskDetailData.childTasks"
              >
                <div
                  v-for="(item, index) in propsObj.taskDetailData.childTasks"
                  :key="index"
                  class="taskHead childTaskItem"
                >
                  <span style="display: flex; align-items: center">
                    <span
                      style="
                        margin-right: 5px;
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                      "
                    >
                      <i
                        class="el-icon-finished"
                        style="cursor: pointer; font-size: 16px; color: #1890ff"
                        v-if="item.status === '0'"
                        @click="handleFinishChildTask(item)"
                      ></i>
                    </span>
                    <span>{{ index + 1 }}、</span
                    ><el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.title"
                      placement="top"
                      ><span
                        style="
                          display: inline-block;
                          width: 200px;
                          overflow: hidden;
                          height: 16px;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                        :style="{
                          'text-decoration':
                            item.status === '0' ? 'none' : 'line-through',
                          color: item.status === '0' ? '#666' : '#aaa',
                        }"
                        >{{ item.title }}</span
                      ></el-tooltip
                    >
                  </span>
                  <span style="display: flex; align-items: center">
                    <span
                      >{{ item.endTime }}（{{ getStatus(item.status) }}）</span
                    >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="`${item.headUserName}(${item.headUserDept})`"
                      placement="top"
                    >
                      <span class="hasTaskHead" style="padding: 8px 8px 0 8px">
                        <img
                          :src="item.headUserAvatar"
                          alt=""
                          v-if="item.headUserAvatar"
                        />
                        <span v-else class="avatar">{{
                          item.headUserName[0]
                        }}</span>
                      </span>
                    </el-tooltip>
                  </span>
                </div>
              </div>
            </div>
            <div
              v-if="
                propsObj.taskDetailData.files &&
                propsObj.taskDetailData.files.length
              "
            >
              <div class="iconMainFlex">
                <i
                  class="el-icon-folder-opened"
                  style="margin-right: 10px; font-size: 20px; color: #606266"
                ></i>
                <span style="font-size: 13px; color: #666; margin-top: 5px"
                  >附件</span
                >
              </div>
              <div
                style="margin-top: 12px"
                v-if="propsObj.taskDetailData.files"
              >
                <div
                  v-for="(item, index) in propsObj.taskDetailData.files"
                  :key="index"
                  style="
                    margin-left: 10px;
                    margin-bottom: 8px;
                    font-size: 14px;
                    color: #666;
                    padding-left: 20px;
                    display: flex;
                    justify-content: space-between;
                  "
                  class="fileItem"
                >
                  <span @click="handlePreview(item)"
                    ><span>{{ index + 1 }}、</span>{{ item.name }}</span
                  >
                  <i
                    class="el-icon-download"
                    style="cursor: pointer; color: #1890ff"
                    @click.stop="handleDownload(item)"
                  ></i>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <div>
              <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="动态" name="1">
                  <div
                    style="padding-top: 20px"
                    v-if="propsObj.taskDetailData.optRecords.length"
                  >
                    <div
                      v-for="item in propsObj.taskDetailData.optRecords"
                      :key="item.id"
                      style="margin-bottom: 20px"
                    >
                      <div class="operate" style="margin-bottom: 0">
                        <span class="operateLeft">
                          <img
                            :src="item.optUserAvatar"
                            alt=""
                            class="optUserAvatarImg"
                            v-if="item.optUserAvatar"
                          />
                          <span class="optUserAvatar" v-else>{{
                            item.optUserName[0]
                          }}</span>
                          <span class="operateName">{{
                            item.optUserName
                          }}</span>
                          <span class="operateDetail">{{
                            item.optTypeDesc
                          }}</span>
                        </span>
                        <span class="operateTime">{{ item.optTime }}</span>
                      </div>
                      <div
                        v-if="item.optContent"
                        style="font-size: 14px; color: #333; margin-left: 37px"
                      >
                        备注：{{ item.optContent }}
                      </div>
                    </div>
                  </div>
                  <el-empty description="暂无动态" v-else></el-empty>
                </el-tab-pane>
                <el-tab-pane label="评论" name="2">
                  <div class="comment" v-if="taskCommentList.length">
                    <div v-for="item in taskCommentList" :key="item.id">
                      <div class="operate">
                        <span class="operateLeft">
                          <img
                            :src="item.createByAvatar"
                            alt=""
                            class="optUserAvatarImg"
                            v-if="item.createByAvatar"
                          />
                          <span class="optUserAvatar" v-else>{{
                            item.createByName[0]
                          }}</span>
                          <span class="operateName">{{
                            item.createByName
                          }}</span>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="回复"
                            placement="top"
                          >
                            <i
                              class="el-icon-chat-dot-round"
                              @click="handleCommentReply(item)"
                              style="
                                color: #409eff;
                                cursor: pointer;
                                margin-left: 5px;
                                font-size: 18px;
                              "
                            ></i>
                          </el-tooltip>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除"
                            placement="top"
                          >
                            <i
                              class="el-icon-delete-solid"
                              @click="handleDeleteComment(item)"
                              style="
                                color: #f56c6c;
                                cursor: pointer;
                                margin-left: 5px;
                                font-size: 18px;
                              "
                            ></i>
                          </el-tooltip>
                        </span>
                        <span class="operateTime">{{ item.createTime }}</span>
                      </div>
                      <div
                        class="operateDetail"
                        v-html="item.comment"
                        @click="replayImgShow($event)"
                      ></div>
                      <div class="replyDetail" v-if="item.superior">
                        <p>
                          <span>{{ item.superior.createByName }}：</span>
                        </p>
                        <div
                          v-html="item.superior.comment"
                          @click="replayImgShow($event)"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <el-empty description="暂无评论" v-else></el-empty>
                </el-tab-pane>
              </el-tabs>
            </div>
            <!-- <div
          v-if="activeName === '2'"
          class="editorMainPad"
          :style="{
            height: `${
              $refs.editorMainRef && $refs.editorMainRef.clientHeight || 160
            }px`,
          }"
        >{{editorMainRefHeight}}</div> -->
          </div>
        </div>
        <div v-if="activeName === '2'" class="editorMain" ref="editorMainRef">
          <div class="reply" v-if="replyValue">
            <p>
              <span>{{ replyValue.createByName }}：</span
              ><i
                class="el-icon-error"
                style="
                  color: rgb(64, 158, 255);
                  cursor: pointer;
                  font-size: 18px;
                "
                @click="replyValue = null"
              ></i>
            </p>
            <div v-html="replyValue.comment"></div>
          </div>

          <div ref="editorRef" style="position: relative"  v-if="!isFile">
            <el-button
              type="primary"
              icon="el-icon-s-promotion"
              size="mini"
              class="send"
              @click="handleSend"
              :loading="sendLoading"
              >发送</el-button
            >
            <Editor v-model="commentMsg" :min-height="100"/>
          </div>
        </div>
      </div>
    </el-drawer>
    <fileDialog :fileModal="fileModal" />
    <el-image
      ref="previewImg"
      :src="initialIndexUrl"
      :preview-src-list="srcList"
      style="width: 100%; height: 100%"
    >
    </el-image>
  </div>
</template>

<script >
import moment from "moment";
import {
  addComment,
  commentList,
  deleteComment,
  finishTask,
  auditTaskReview,
} from "@/api/task/task.js";
import fileDialog from "@/views/taskMassage/components/task/components/fileDialog.vue";
import Editor from "@/components/Editor";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    propsObj: {
      type: Object,
      default: () => {},
    },
    finishLoading: {
      type: Boolean,
      default: false,
    },
    handleFinishTask: {
      type: Function,
      default: () => {},
    },
    handleTaskEdit: {
      type: Function,
      default: () => {},
    },
    isFile: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    fileDialog,
    Editor,
  },
  data() {
    const close = () => {
      this.fileModal.open = false;
    };
    return {
      fileModal: {
        open: false,
        close: close,
        row: {},
      },
      activeName: "1",
      commentMsg: undefined,
      taskCommentList: [],
      sendLoading: false,
      replyValue: null,
      commentMsgHeight: 160,
      srcList: [],
      initialIndexUrl: undefined,
    };
  },
  methods: {
    replayImgShow(e) {
      this.initialIndexUrl = e.target?.src;
      this.srcList = [e.target?.src];
      this.$refs.previewImg.showViewer = true;
    },
    handleReviewOperate(type) {
      this.$prompt(`确认${type === "1" ? "通过" : "驳回"}该任务吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
        inputPlaceholder: "请输入",
        inputType: "textarea",
        inputValidator:
          type === "1"
            ? null
            : (value) => {
                if (!value) {
                  return "请输入驳回原因！";
                }
              },
      })
        .then(async ({ value }) => {
          const res = await auditTaskReview(
            this.propsObj.taskDetailData.id,
            type,
            { remark: value }
          );
          if (res.code === 200) {
            this.$message.success("审核成功！");
            this.handleTaskEdit(
              this.propsObj.taskDetailData.type,
              this.propsObj.taskDetailData.id,
              true,
              this.propsObj.taskDetailData.taskType
            );
          }
        })
        .catch(() => {});
    },
    async handleFinishChildTask(row) {
      if (row.status === "0") {
        this.$prompt("确认完成该任务吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
          inputPlaceholder: "请输入备注",
          inputType: "textarea",
        })
          .then(async ({ value }) => {
            const res = await finishTask(row.id, { remark: value });
            if (res.code === 200) {
              this.$message.success("操作成功！");
              this.handleTaskEdit(
                this.propsObj.taskDetailData.type,
                this.propsObj.taskDetailData.id,
                true
              );
              this.propsObj.getList();
            }
          })
          .catch(() => {});
      } else {
        this.$message.error(`${this.getStatus(row.status)},请勿重复操作！`);
      }
    },
    handleCommentReply(row) {
      this.replyValue = row;
    },
    handleDeleteComment(row) {
      this.$confirm("确认删除该评论吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteComment(row.id);
          if (res.code === 200) {
            this.$message.success("删除成功");
            await this.getCommentList(this.propsObj.taskDetailData.id);
          }
        })
        .catch(() => {});
    },
    async handleSend() {
      if (!this.commentMsg) return this.$message.error("请输入后发送！");
      this.sendLoading = true;
      const res = await addComment({
        taskId: this.propsObj.taskDetailData.id,
        comment: this.commentMsg,
        superiorId: this.replyValue?.id,
      });
      this.sendLoading = false;
      this.commentMsg = undefined;
      this.replyValue = null;
      if (res.code === 200) {
        await this.getCommentList(this.propsObj.taskDetailData.id);
      }
    },
    async getCommentList() {
      const res = await commentList(this.propsObj.taskDetailData.id);
      if (res.code === 200) {
        this.taskCommentList = res.data;
      }
    },
    async handleTabClick(val) {
      if (val._props.name === "2") {
        await this.getCommentList(this.propsObj.taskDetailData.id);
      }
      this.$nextTick(() => {
        let scrollEl = this.$refs.fixedMain;
        console.log(scrollEl);
        scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: "smooth" });
      });
    },
    handlePreview(row) {
      if (
        row.format ===
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      ) {
        row.formatType = "word";
      } else if (
        row.format === "application/vnd.ms-excel" ||
        row.format ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      ) {
        row.formatType = "excel";
      } else if (row.format === "application/pdf") {
        row.formatType = "pdf";
      } else if (row.format.includes("image/")) {
        row.formatType = "img";
      } else {
        this.$message.error("无法识别文件类型,请下载后查看");
        return;
      }
      this.fileModal.open = true;
      this.fileModal.row = row;
    },
    handleDownload(item) {
      const a = document.createElement("a");
      a.href = item.url;
      a.download = item.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    //  动态计算计划工时
    handleEndTimeChange(start, end) {
      if (start && end) {
        let startTime = moment(start);
        let endTime = moment(end);
        let diff = endTime.diff(startTime, "milliseconds");
        let days = diff / (1000 * 60 * 60 * 24);
        return Math.round(days * 10) / 10;
      }
    },
    getLoopType(val) {
      return val
        ? {
            1: "每天循环",
            2: "每周循环",
            3: "每月循环",
            4: "每年循环",
          }[val]
        : "不循环";
    },
    currentPriority(val) {
      return {
        1: "primary",
        2: "warning",
        3: "danger",
      }[val];
    },
    getStatus(val) {
      return {
        0: "待处理",
        10: "完成待审批",
        20: "审批中",
        30: "审批不通过",
        40: "已完成",
      }[val];
    },
  },
};
</script>

<style lang="scss" scoped>
.taskDrawer {
  .reviewTaksFinish {
    padding: 12px 20px;
    border-radius: 6px;
    border: 1px solid #1890ff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ecf5ff;
    .avater {
      display: inline-block;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background: #1890ff;
      color: #fff;
      line-height: 35px;
      text-align: center;
      font-size: 16px;
    }
    .avaterImg {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }
  .taskDescBorder {
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 3px;
    padding: 8px;
  }
  .fixedBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .fixedMain {
      width: 100%;
      flex: 1;
      overflow: auto;
    }
  }
  .replyDetail {
    background: #f5f1f1;
    width: 100%;
    border-radius: 5px;
    padding: 12px 0;
    margin-left: 12px;
    margin-bottom: 12px;
    p {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      margin-top: 0;
      span {
        color: #666;
        font-size: 13px;
      }
    }
    div {
      padding: 0 20px;
      font-size: 14px;
    }
  }
  .editorMain {
    // position: fixed;
    // bottom: 0;
    background: #fff;
    margin-left: -20px;
    z-index: 9999;
    ::v-deep .ql-toolbar.ql-snow {
      background: #fff;
    }
    ::v-deep .ql-container {
      background: #fff;
    }
    ::v-deep .ql-picker-options {
      right: 0;
    }
    .send {
      position: absolute;
      right: 10px;
      top: 34px;
      z-index: 10000;
    }

    .reply {
      border-top: 1px solid #ccc;
      background: #fff;
      width: 100%;
      p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        span {
          color: #666;
          font-size: 13px;
        }
      }
      div {
        padding: 0 20px;
        font-size: 14px;
      }
    }
  }
  .comment {
    padding-top: 20px;
    padding-bottom: 20px;
    .operateDetail {
      margin-left: 12px;
      color: #888;
      font-size: 14px;
      background: #ecf5ff;
      padding: 1px 12px;
      margin-bottom: 12px;
      border-radius: 5px;
    }
    .operate {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      margin-bottom: 20px;
      .operateLeft {
        display: flex;
        align-items: center;
        .optUserAvatar {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: #1890ff;
          color: #fff;
          font-size: 14px;
          text-align: center;
          line-height: 28px;
        }
        .optUserAvatarImg {
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }
        .operateName {
          margin-left: 8px;
          color: #666;
        }
      }
      .operateTime {
        color: #888;
        font-size: 13px;
      }
    }
  }
  .operate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
    .operateLeft {
      display: flex;
      align-items: center;
      .optUserAvatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #1890ff;
        color: #fff;
        font-size: 14px;
        text-align: center;
        line-height: 28px;
      }
      .optUserAvatarImg {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }
      .operateName {
        margin-left: 8px;
        color: #666;
      }
      .operateDetail {
        margin-left: 12px;
        color: #888;
      }
    }
    .operateTime {
      color: #888;
      font-size: 13px;
    }
  }
  ::v-deep .el-tabs {
    width: 100%;
    .el-tabs__header {
      width: 100%;
    }
    .el-tabs__item {
      width: auto;
      font-size: 14px;
    }
  }
  .taskModelTitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 12px;
  }
  .taskModelMain {
    padding-right: 20px;
    .createUser {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      .code {
        font-size: 14px;
        color: #999;
      }
      .createUserName {
        cursor: pointer;
        span:nth-of-type(1) {
          color: #1890ff;
          font-size: 13px;
          padding: 8px 28px 8px 8px;
          background: #ecf5ff;
          border-radius: 15px;
          margin-right: -20px;
        }
        .avater {
          display: inline-block;
          width: 35px;
          height: 35px;
          border-radius: 50%;
          background: #1890ff;
          color: #fff;
          line-height: 35px;
          text-align: center;
          font-size: 16px;
        }
        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
      }
    }
    .projectTask {
      margin-bottom: 12px;
    }
    .title_task {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      p {
        margin: 0;
      }
      p:nth-of-type(1) {
        font-size: 24px;
        // background: #c0f0a8;
        width: 88%;
        padding: 8px;
        border-radius: 3px;
      }
    }
    .taskHead {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .hasTaskHead:hover {
        background: #ecf5ff;
        border-radius: 35px;
      }
      .hasTaskHead:hover .iconView {
        display: block;
      }
      .iconView {
        display: none;
        font-size: 18px;
        margin-left: 5px;
        color: #409eff;
      }
      .hasTaskHead {
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        span {
          color: #666;
          font-size: 12px;
        }
        .avatar {
          display: inline-block;
          width: 35px;
          height: 35px;
          border-radius: 50%;
          background: #1890ff;
          color: #fff;
          line-height: 35px;
          text-align: center;
          font-size: 16px;
        }
      }
    }
    .time {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .taskDesc {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    .priority {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    .planWorking {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    .label {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    .participants {
      display: flex;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    .finishReview {
      display: flex;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    .childTask {
    }
    .fileItem:hover {
      color: #1890ff !important;
      cursor: pointer;
    }
  }

  ::v-deep .taskModelCustomClass {
    width: 35% !important;
    // position: relative;
    .el-drawer__header {
      margin-bottom: 12px;
      border-bottom: 1px solid #f7f7f8;
    }
    .el-drawer__close-btn {
      margin-top: -10px;
    }
    .el-drawer__body {
      padding: 0 0px 0px 20px;
    }
  }
  .childTaskItem {
    margin-left: 10px;
    margin-bottom: 0px !important;
    font-size: 14px;
    color: #666;
    padding-left: 20px;
    diaplay: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>